<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Steady Rhythm</title>

    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />


     <style type="text/css">
        #container {
            background: #a9a9a9;
            width: 300px;
        }

        #light_fixture {
            position:relative;
            left:90px;
            top:10px;
            padding-bottom:10px;
            width: 125px;
            height: 100px;
        }

        #metronome {
            background: lime;
            width: 100px;
            height: 100px;
        }

        .subdivision {
            height:12.5%;
            background: yellow;
        }
     </style>
     <!--//$('#sound_element').html("<embed src='"+sound_file_url+"' hidden=true autostart=true loop=false>"); -->
     <script type="text/javascript" src="./js/jquery-1.6.1.js"></script>
     <script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script>
     <script type="text/javascript">
        var intervalReference   = 0;
        var soundToggle         = false;  // play sound on tick
        var accentBeat          = false;  // accent the 1st downbeat
        var eighthNote          = false;  // play eighth note
        var sixteenthNote       = false;  // play sixteenth note
        var tripletNote         = false;  // play triplets
        var beatsToMeasure      = 4;      // time sig, top
        var beatEqNote          = 4;      // time sig, bottom
        var beatsPerMinute      = 90;     // Shows the current beats per minute
        var currentCount        = 1;      // the current beat (1-3)
        var countIncrement      = .5;      // default to quarternote

        // This is the metronome tick event
        var metronomeTick = function() {
            $("#metronome").stop();
            $("#metronome").animate({opacity: 1},30,
                                    function() {
                                        $(this).animate({opacity:0.0});
                                    }
            );
        };

        var metronome8thTick = function() {
            var current_sub_div = "#sub_div_" + currentCount;
            $("#debug_div").html(current_sub_div);
            //$(current_sub_div).show();
            $(current_sub_div).stop();
            $(current_sub_div).animate({opacity: 1},15,
                                    function() {
                                        $(this).animate({opacity:0.0});
                                    }
                    );
            currentCount += countIncrement;
            if(currentCount > 4.5) currentCount = 1;
        };

        $(function() {
            // hide the subdivisions
            //$("subdivision").hide(); // hides any nodes using the subdivision class
            // setup the slider
            var slider = $("#bpm").slider({
                min: 40,
                max: 240,
                value: 140,
                slide: function( event, ui ) {
                    clearInterval(intervalReference);
                    //intervalReference = setInterval(metronomeTick, 1000*60/ui.value);
                    intervalReference = setInterval(metronome8thTick, (1000*60/ui.value)/2);
                    $("#bpmshow").text("Current beats per minute: " + ui.value);
                }
            });
        });


    </script>
</head>
<body>
    <span id="sound_element"></span>

    <div id="container">
        <div id="light_fixture">
            <span id="metronome">
                <div class="subdivision" id="sub_div_1"></div>
                <div class="subdivision" id="sub_div_1.5"></div>
                <div class="subdivision" id="sub_div_2"></div>
                <div class="subdivision" id="sub_div_2.5"></div>
                <div class="subdivision" id="sub_div_3"></div>
                <div class="subdivision" id="sub_div_3.5"></div>
                <div class="subdivision" id="sub_div_4"></div>
                <div class="subdivision" id="sub_div_4.5"></div>
            </span>
            <span id="multiples"></span>
        </div>
        <div id="bpm"></div>
        <span id="bpmshow"></span>
        <div id="note_control">
            <form name="notes_form" id="notes_form" action="#">
                <input type="checkbox" id="sound_check" value="false" /><label for="sound_check">Sound</label>
                <input type="checkbox" id="accent_check" value="false" /><label for="accent_check">Accent</label>
                <input type="checkbox" id="eighth_check" value="false" /><label for="eighth_check">8th Note</label>
                <input disabled type="checkbox" id="sixteenth_check" value="false" /><label for="sixteenth_check">16th Note</label>
            </form>
        </div> <!-- end note control -->
    </div> <!-- end container -->

    <div id="debug_div"></div>

</body>
</html>